<template>
	<view class="page">
		<pageTxt>
			<!--  v-model="dataList" @query="queryList" -->
			<z-paging ref="paging" refresher-only @onRefresh="onRefresh" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<u-navbar title="增减项详情" :autoBack="true" :fixed="false"></u-navbar>
					<view class="tab-box">
						<u-tabs
							:current="tabIndex"
							@click="tabClickFunc"
							:list="tablist"
							inactiveStyle="color: #919092;"
							activeStyle="color: #3B75FF;"
							lineColor="#3B75FF"
						></u-tabs>
					</view>
				</template>
				<!-- 内容 -->
				<view class="detail-content-box" v-if="changeInfo">
					<template v-if="tabIndex == 0">
						<u-empty
							v-if="!$fieldShowFunc('43-xmxx') && !$fieldShowFunc('43-zjxxx')"
							marginTop="300rpx"
							icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png"
							text=" "
						></u-empty>
						<view class="item-box" v-if="$fieldShowFunc('43-xmxx')">
							<view class="title">项目信息</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_xmmc')">
								<text class="txt">项目名称</text>
								<view class="content">{{ changeInfo.project_name }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_xmbh')">
								<text class="txt">项目编号</text>
								<view class="content">
									<text class="txt-btn" @click="navToProjectFunc">
										{{ changeInfo.project_number || '--' }}
									</text>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_xmpp')">
								<text class="txt">项目品牌</text>
								<view class="content">{{ changeInfo.brand_name }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_xmlx')">
								<text class="txt">项目类型</text>
								<view class="content">{{ changeInfo.store_type_name }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_xmbjd')">
								<text class="txt">项目报价单</text>
								<view class="content">
									<view class="txt-btn" @click="jump()">{{ changeInfo.project_quotation_num }}</view>
								</view>
							</view>
						</view>
						<view class="item-box" v-if="$fieldShowFunc('43-zjxxx')">
							<view class="title">增减项信息</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_zjlx')">
								<text class="txt">增减类型</text>
								<view class="content">{{ changeInfo.increase_or_decrease == 1 ? '增项' : '减项' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_zjnr')">
								<text class="txt">增减内容</text>
								<view class="content">{{ changeInfo.change_content }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_sgnrsm')">
								<text class="txt">施工内容说明</text>
								<view class="content">{{ changeInfo.construction_content }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_xmbjd')">
								<text class="txt">增减项原因</text>
								<view class="content">{{ changeInfo.reason_type }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_zjxcjsj')">
								<text class="txt">创建时间</text>
								<view class="content">{{ changeInfo.created_at }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_zjxfj')">
								<text class="txt">附件</text>
								<view class="content flex ac flex">
									<image
										v-for="(item, index) in changeInfo.change_file"
										:key="index"
										:src="$fileImgFunc(item)"
										@click="previewFunc(item)"
										mode="aspectFill"
										class="img-box"
									></image>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_zjxbz')">
								<text class="txt">备注</text>
								<view class="content">{{ changeInfo.remark || '--' }}</view>
							</view>
						</view>
						<view class="item-box" v-if="$fieldShowFunc('43-zjxbj') && changeInfo.change_status > 10">
							<view class="title">增减项报价</view>
							<!-- 增减项金额 -->
							<u-collapse accordion v-if="$fieldShowFunc('zjx_zjxje')" :border="false" value="sgf">
								<u-collapse-item
									title="增减项金额"
									name="sgf"
									:isLink="$fieldShowFunc('zjx_jczxf') || $fieldShowFunc('zjx_zccgf') || $fieldShowFunc('zjx_sj')"
									:value="convert_val(changeInfo.change_amount)"
								>
									<view class="item-child-box" v-if="$fieldShowFunc('zjx_jczxf') || $fieldShowFunc('zjx_zccgf') || $fieldShowFunc('zjx_sj')">
										<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_jczxf')">
											<text class="txt">基础装修费</text>
											<view class="content">{{ convert_val(changeInfo.basic_decoration_fee) }}</view>
										</view>
										<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_zccgf')">
											<text class="txt">主材采购费</text>
											<view class="content">{{ convert_val(changeInfo.material_costs) }}</view>
										</view>
										<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_sj')">
											<text class="txt">税金</text>
											<view class="content">{{ convert_val(changeInfo.quotation_taxes) }}</view>
										</view>
									</view>
								</u-collapse-item>
							</u-collapse>

							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_yhje')">
								<text class="txt">优惠金额</text>
								<view class="content">{{ convert_val(changeInfo.discount_amount) }}</view>
							</view>
							<!-- 成本金额 -->
							<u-collapse accordion v-if="$fieldShowFunc('zjx_cbje')" :border="false" value="cbje">
								<u-collapse-item
									title="成本金额"
									name="cbje"
									:isLink="$fieldShowFunc('zjx_xccgcb') || $fieldShowFunc('zjx_gscjcb') || $fieldShowFunc('zjx_glcb')"
									:value="convert_val(changeInfo.cost_amount)"
								>
									<view class="item-child-box" v-if="$fieldShowFunc('zjx_xccgcb') || $fieldShowFunc('zjx_gscjcb') || $fieldShowFunc('zjx_glcb')">
										<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_xccgcb')">
											<text class="txt">现场采购成本</text>
											<view class="content">{{ convert_val(changeInfo.procurement_cost) }}</view>
										</view>
										<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_gscjcb')">
											<text class="txt">公司采集成本</text>
											<view class="content">{{ convert_val(changeInfo.centralized_procurement_cost) }}</view>
										</view>
										<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_glcb')">
											<text class="txt">管理成本</text>
											<view class="content">{{ convert_val(changeInfo.management_costs) }}</view>
										</view>
									</view>
								</u-collapse-item>
							</u-collapse>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_xccgcb') && !$fieldShowFunc('zjx_cbje')">
								<text class="txt">现场采购成本</text>
								<view class="content">{{ convert_val(changeInfo.procurement_cost) }}</view>
							</view>

							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_lrje')">
								<text class="txt">利润金额</text>
								<view class="content">{{ convert_val(changeInfo.profit_amount) }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_bjsj')">
								<text class="txt">报价时间</text>
								<view class="content">{{ changeInfo.quotation_created_at }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_zjxbjsx')">
								<text class="txt">报价时效</text>
								<view class="content">{{ changeInfo.quotation_validity }}天</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_zjxbjfj')">
								<text class="txt">报价附件</text>
								<view class="content flex ac flex">
									<template v-for="(item, index) in changeInfo.quotation_file">
										<image v-if="item.type == 1" :key="index" :src="$fileImgFunc(item)" @click="previewFunc(item)" mode="aspectFill" class="img-box"></image>
									</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_zjxcbfj')">
								<text class="txt">成本附件</text>
								<view class="content flex ac flex">
									<template v-for="(item, index) in changeInfo.cost_list_file">
										<image v-if="item.type == 2" :key="index" :src="$fileImgFunc(item)" @click="previewFunc(item)" mode="aspectFill" class="img-box"></image>
									</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zjx_zjxlrfj')">
								<text class="txt">利润附件</text>
								<view class="content flex ac flex">
									<template v-for="(item, index) in changeInfo.profit_statement_file">
										<image v-if="item.type == 3" :key="index" :src="$fileImgFunc(item)" @click="previewFunc(item)" mode="aspectFill" class="img-box"></image>
									</template>
								</view>
							</view>
						</view>
					</template>
					<!-- 历史记录 -->
					<template v-if="tabIndex == 1">
						<view class="item-box">
							<u-empty
								v-if="!changeInfo.log_list.length"
								marginTop="300rpx"
								icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png"
								text=" "
							></u-empty>
							<u-steps current="0" direction="column" dot activeColor="#3b75ff" inactiveColor="#3b75ff">
								<u-steps-item v-for="(item, index) in changeInfo.log_list" :key="index">
									<template slot="desc">
										<view class="steps-title flex ac jb">
											<view class="steps-title-title">{{ item.updated_at }}</view>
											<view class="steps-title-user-data-box flex ac jc">
												<image class="avater-box" :src="item.handlers_image" mode="aspectFit"></image>
												<view class="user-name u-line-1">
													{{ item.handlers_name + '-' + item.handlers_position }}
												</view>
											</view>
										</view>
										<view class="steps-desc">
											<view class="steps-desc-title">
												{{ item.content }}
											</view>
											<template v-if="item.change_status == 20">
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_zjxje')">
													<view class="steps-desc-box-title">增减项金额</view>
													<view class="steps-desc-box-desc">
														{{ convert_val(item.form_data.change_amount) }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_jczxf')">
													<view class="steps-desc-box-title">基础装修费</view>
													<view class="steps-desc-box-desc">
														{{ convert_val(item.form_data.basic_decoration_fee) }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_zccgf')">
													<view class="steps-desc-box-title">主材采购费</view>
													<view class="steps-desc-box-desc">
														{{ convert_val(item.form_data.material_costs) }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_sj')">
													<view class="steps-desc-box-title">税金</view>
													<view class="steps-desc-box-desc">
														{{ convert_val(item.form_data.quotation_taxes) }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_yhje')">
													<view class="steps-desc-box-title">优惠金额</view>
													<view class="steps-desc-box-desc">
														{{ convert_val(item.form_data.discount_amount) }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_cbje')">
													<view class="steps-desc-box-title">成本金额</view>
													<view class="steps-desc-box-desc">
														{{ convert_val(item.form_data.cost_amount) }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_xccgcb')">
													<view class="steps-desc-box-title">现场采购成本</view>
													<view class="steps-desc-box-desc">
														{{ convert_val(item.form_data.procurement_cost) }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_gscjcb')">
													<view class="steps-desc-box-title">公司集采成本</view>
													<view class="steps-desc-box-desc">
														{{ convert_val(item.form_data.centralized_procurement_cost) }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_glcb')">
													<view class="steps-desc-box-title">管理成本</view>
													<view class="steps-desc-box-desc">
														{{ convert_val(item.form_data.management_costs) }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_lrje')">
													<view class="steps-desc-box-title">利润金额</view>
													<view class="steps-desc-box-desc">
														{{ convert_val(item.form_data.profit_amount) }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_zjxbjfj')">
													<view class="steps-desc-box-title">报价附件</view>
													<view class="steps-desc-box-desc flex ac flex-wrap">
														<image
															@click="previewFunc(file)"
															class="img-box"
															v-for="(file, fileIndex) in item.form_data.quotation_file"
															:key="fileIndex"
															:src="$fileImgFunc(file)"
														></image>
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_zjxcbfj')">
													<view class="steps-desc-box-title">成本附件</view>
													<view class="steps-desc-box-desc flex ac flex-wrap">
														<image
															@click="previewFunc(file)"
															class="img-box"
															v-for="(file, fileIndex) in item.form_data.cost_list_file"
															:key="fileIndex"
															:src="$fileImgFunc(file)"
														></image>
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_zjxlrfj')">
													<view class="steps-desc-box-title">利润附件</view>
													<view class="steps-desc-box-desc flex ac flex-wrap">
														<image
															@click="previewFunc(file)"
															class="img-box"
															v-for="(file, fileIndex) in item.form_data.profit_statement_file"
															:key="fileIndex"
															:src="$fileImgFunc(file)"
														></image>
													</view>
												</view>
											</template>
											<template
												v-if="
													item.change_status == 25 ||
													item.change_status == 30 ||
													item.change_status == 35 ||
													item.change_status == 40 ||
													item.change_status == 45 ||
													item.change_status == 60 ||
													item.change_status == 65
												"
											>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zjx_spyj')">
													<view class="steps-desc-box-title">审批意见</view>
													<view class="steps-desc-box-desc">{{ item.remark }}</view>
												</view>
											</template>
										</view>
									</template>
								</u-steps-item>
							</u-steps>
						</view>
					</template>
				</view>
				<view class="bottom-btn-box flex ac jb" slot="bottom">
					<view style="width: 100%">
						<judgeBtn
							v-if="!loading"
							info
							unborder
							:per_arr="per_arr"
							:btns="btns"
							:state="changeInfo.change_status"
							:item="changeInfo"
							@change="btnsChange"
						></judgeBtn>
					</view>
				</view>
			</z-paging>
		</pageTxt>
		<!-- 文件预览 -->
		<preFileCom :fileObj="fileObj" @onFileSuccess="fileObj = ''"></preFileCom>

		<increaseDecreaseItems :value.sync="per_name" :oper_item="oper_item" @submit="handleSubmit"></increaseDecreaseItems>
	</view>
</template>

<script>
export default {
	data() {
		return {
			per_arr: [],
			btns: [
				{
					per_name: 'projects_changeItemsAssignCostEstimator',
					state: 10,
					name: '修改负责人'
				},
				{
					per_name: 'increaseDecreaseItems_shbjd1',
					state: 20,
					name: '报价单审核'
				},
				{
					per_name: 'increaseDecreaseItems_shbjd2',
					state: 30,
					name: '报价单复审'
				},
				{
					per_name: 'increaseDecreaseItems_shbjd3',
					state: 40,
					name: '报价单三审'
				},
				{
					per_name: 'projects_changeInvalidation',
					state: 0,
					name: '作废'
				}
			],

			fileObj: '',
			loading: true,
			id: '',
			changeInfo: '',
			tabIndex: 0,
			tablist: [
				{
					name: '详情'
				},
				{
					name: '历史记录'
				}
			],
			// 操作相关
			oper_item: {},
			per_name: ''
		};
	},
	onShow() {
		this.getChangeDetails(this.id);
	},
	onLoad(option) {
		this.id = option.id;
		// 获取权限
		this.$Api
			.getHtmlAuthority({
				path: '/increaseDecreaseItemsList'
			})
			.then((res) => {
				console.log(res, 'getHtmlAuthority');
				if (res.code == 200) {
					this.per_arr = res.data.permission;
				}
			});
	},
	computed: {
		// 判断是否需要显示负号
		convert_val() {
			return (val) => {
				if (this.changeInfo.increase_or_decrease == 1 || val == 0) {
					var price = val + '元';
				} else {
					var price = '-' + val + '元';
				}
				return price;
			};
		}
	},
	methods: {
		onRefresh() {
			this.getChangeDetails(this.changeInfo.id);
		},
		tabClickFunc(e) {
			this.tabIndex = e.index;
		},
		// 详情
		getChangeDetails(change_id) {
			this.loading = true;
			this.$Apipc
				.getChangeDetails({
					change_id
				})
				.then((res) => {
					console.log(res, '增减项详情');
					if (res.code == 200) {
						res.data.log_list.forEach((item) => {
							item.form_data = JSON.parse(item.form_data);
						});
						this.changeInfo = res.data;
					}
					this.loading = false;
					this.$refs.paging.complete();
				});
		},
		// 预览
		previewFunc(item) {
			console.log(item);
			this.fileObj = item;
		},

		// 操作按钮触发点击
		btnsChange(e) {
			console.log(e, 'xxxsww');
			this.oper_item = e.item;
			switch (e.per_name) {
				// 修改负责人
				case 'projects_changeItemsAssignCostEstimator':
					this.per_name = e.per_name;
					break;
				// 作废
				case 'projects_changeInvalidation':
					this.per_name = e.per_name;
					break;
				// 审核操作
				default:
					this.per_name = 'increaseDecreaseItems_shbjd';
					break;
			}
		},

		handleSubmit(type) {
			// 作废跳出
			if (type == 'projects_changeInvalidation') {
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];
				if (prevPage && prevPage.$vm.$refs.idi) {
					prevPage.dataList.splice(prevPage.oper_idx, 1);
				}
				uni.navigateBack({
					delta: 1
				});
			} else {
				this.onRefresh();
			}
		},
		// 去详情项目
		navToProjectFunc() {
			uni.navigateTo({
				url: '/pagesB/projectDetail/projectDetail?id=' + this.changeInfo.project_id
			});
		},
		// 去报价单
		jump() {
			uni.navigateTo({
				url: '/pagesB/budgetManagementDetail/budgetManagementDetail?id=' + this.changeInfo.project_id
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
